<template>
  <div class="container-zhu-task-award">

    <div
      v-for="(item,index) in list"
      :key="index"
    >

      <el-form-item>
        <div style="display: flex;margin-top:15px;">
          <el-select

            v-model="item[0]"
            style="width: 40%"
            placeholder="请选择"
            @change="mapEmitData()"
          >
            <el-option

              v-for="item in daojuList"
              :key="item.id"
              :label="item.propsName"
              :value="item.id.toString()"
            />
          </el-select>
          <el-input
            v-model.number="item[1]"
            type="number"
            placeholder="请输入数量"
            style="width: 40%;margin-left: 1%;"
            @blur="mapEmitData()"
          />
          <el-button style="margin-left: 1%; width: 18%;" type="primary" @click="delAward(index)">删除</el-button>

        </div>

      </el-form-item>

    </div>

    <div style="margin-top: 15px;">
      <el-button type="primary" @click="addAward">新 增</el-button>
    </div>

  </div>
</template>
<script>
import daojuApi from '@/api/daojuApi'

export default {
  name: 'ZhuTaskAward',
  // 组件组件
  components: {},
  // 视图层要渲染的数据
  data() {
    return {
      oldData: '',
      list: [
        // [12,3],//道具 id , 道具 道具 数量
      ],
      daojuList: []// 提供给用户选择的 道具列表 用户用id 进行选择
    }
  },
  watch: {
    '$attrs.list': {
      handler(newName) {
        const list = newName || []
        if (list.length) {
          this.list = list.map(item => {
            item = item.split(',')
            return item
          })
        }
      },
      immediate: true
    }

  },
  inject: [
    'reload'
  ],
  // 页面创建完成时
  created() {
    // 加载道具列表
    this.loadDaoJulist()
  },
  // 自定义函数部分
  methods: {

    // 添加一条 新的空白 奖励
    addAward() {
      this.list.push([])
    },

    // 删除任务奖励
    delAward(index) {
      this.list.splice(index, 1)
      this.mapEmitData()
    },
    // 加载道具列表
    loadDaoJulist() {
      const dagnajuList = localStorage.daojuList
      if (dagnajuList) {
        this.daojuList = JSON.parse(dagnajuList)
        return
      }
      //  获取任务奖励 列表 stast
      daojuApi.getDaojuList().then(res => {
        this.daojuList = res.data.list
        localStorage.daojuList = JSON.stringify(this.daojuList)
      })
    },
    // 映射成 发射数据
    mapEmitData() {
      const list = this.list.map(item => item.toString())
      this.$emit('change', list)
    }
  }
}
</script>
<style>
.container-zhu-task-award {
  border: 1px solid #dddddd;
  width: 100%;
  margin-top: 15px;
  padding: 15px;
}
</style>
<style scoped>
.container-zhu-task-award {

}
</style>

